<div class="container" *ngIf="profile$ | async as profile">
  <div class="my-info">
    <img
      appAvatar
      avatarSize="5rem"
      [src]="profile.avatar"
      alt=""
      class="my-avatar">
    <div class="my-name">
      {{profile.name}} <img src="assets/icons/wechat.png" alt="">
    </div>
    <div class="my-badge">
      勋章墙<img src="assets/icons/navigate_next.png" alt="">
    </div>
    <div class="my-cashback">
      <span><img src="assets/icons/cashback.png" alt="">拼单返现</span>
    </div>
    <div class="my-membership">
      <span><img src="assets/icons/cashback.png" alt="">省钱月卡</span>
    </div>
  </div>
  <div class="brand">
    <span class="title">品牌特卖</span>
    <span class="detail">自然堂直降</span>
    <img src="assets/icons/navigate_next.png" alt="">
  </div>
  <div class="order-status">
    <div class="title">
      我的订单
      <span>查看全部<img src="assets/icons/navigate_next.png" alt=""/></span>
    </div>
    <app-horizontal-grid [displayCols]="5" [cols]="5">
        <span appGridItem *ngFor="let item of orderItems; let idx = index">
          <img [appGridItemImage]="'2rem'" [src]="item.icon"/>
          <span [appGridItemTitle]="'0.8rem'" class="title">{{item.title}}</span>
        </span>
    </app-horizontal-grid>
  </div>
  <div class="tools">
    <app-horizontal-grid [displayCols]="5" [cols]="5">
        <span appGridItem *ngFor="let item of toolsItems; let idx = index">
          <img [appGridItemImage]="'2rem'" [src]="item.icon"/>
          <span [appGridItemTitle]="'0.8rem'" class="title">{{item.title}}</span>
        </span>
    </app-horizontal-grid>
  </div>
</div>
